<template>
  <view class="search-modal-counter">
    <u-overlay
      class="show_overlay"
      :show="showModal"
      @click="overlayClick"
      :duration="350"
    ></u-overlay>

    <u-transition
      :show="showModal"
      mode="slide-down"
      :duration="300"
      :customStyle="transitionStyle"
      class="show_transition"
    >
      <view class="search-modal_content">
        <slot></slot>
      </view>
    </u-transition>
  </view>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      transitionStyle: {
        zIndex: 1000,
        position: 'fixed',
        left: 0,
        top: '240upx'
      }
    };
  },
  computed: {
    showModal: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
  mounted() {},
  methods: {
    overlayClick() {
      this.showModal = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.search-modal-counter {
  flex: 1;
  .show_overlay {
    top: 240upx !important;
  }
  .show_transition {
    z-index: 10075 !important;
  }
  .search-modal_content {
    width: 100vw;
    min-height: 400upx;
    background: #fff;
    z-index: 10076;
  }
}
</style>
